<template>
  <Dialog v-model="dialogVisible" title="工作流详情" width="1000px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="工作流名称">
        {{ workflowData.workflowName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="流程类型">
        <el-tag>{{ getTypeName(workflowData.workflowType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        <el-tag :type="getStatusColor(workflowData.status)">
          {{ getStatusName(workflowData.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="发起人">
        {{ workflowData.initiator || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="发起时间">
        {{ workflowData.startTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="完成时间" v-if="workflowData.endTime">
        {{ workflowData.endTime }}
      </el-descriptions-item>
      <el-descriptions-item label="流程说明" :span="2">
        <div style="white-space: pre-wrap; max-height: 150px; overflow-y: auto;">
          {{ workflowData.workflowDesc || '-' }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 流程步骤 -->
    <el-divider content-position="left">流程步骤</el-divider>
    <el-steps :active="getCurrentStepIndex()" direction="vertical">
      <el-step 
        v-for="(step, index) in workflowData.stepList || []" 
        :key="index"
        :title="step.stepName"
        :description="step.stepDesc"
        :status="getStepStatus(step.status)"
      >
        <template #icon>
          <el-icon v-if="step.status === 2"><Check /></el-icon>
          <el-icon v-else-if="step.status === 3"><Close /></el-icon>
          <el-icon v-else-if="step.status === 1"><Loading /></el-icon>
          <span v-else>{{ index + 1 }}</span>
        </template>
      </el-step>
    </el-steps>
    
    <!-- 审批记录 -->
    <el-divider content-position="left" v-if="workflowData.approvalList && workflowData.approvalList.length > 0">
      审批记录
    </el-divider>
    <el-timeline v-if="workflowData.approvalList && workflowData.approvalList.length > 0">
      <el-timeline-item
        v-for="(approval, index) in workflowData.approvalList"
        :key="index"
        :timestamp="approval.approvalTime"
        :type="getApprovalType(approval.result)"
      >
        <el-card>
          <h4>{{ approval.stepName }}</h4>
          <p><strong>审批人：</strong>{{ approval.approver }}</p>
          <p><strong>审批结果：</strong>
            <el-tag :type="getApprovalColor(approval.result)">
              {{ getApprovalResultName(approval.result) }}
            </el-tag>
          </p>
          <p v-if="approval.comment"><strong>审批意见：</strong>{{ approval.comment }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Check, Close, Loading } from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const workflowData = ref({} as any)

const getTypeName = (type: number) => {
  const typeMap = { 1: '评价申请', 2: '成绩审核', 3: '证书申请', 4: '异议处理' }
  return typeMap[type] || '-'
}

const getStatusName = (status: number) => {
  const statusMap = { 0: '待处理', 1: '处理中', 2: '已完成', 3: '已拒绝', 4: '已撤销' }
  return statusMap[status] || '-'
}

const getStatusColor = (status: number) => {
  const colorMap = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger', 4: 'info' }
  return colorMap[status] || 'info'
}

const getStepStatus = (status: number) => {
  const statusMap = { 0: 'wait', 1: 'process', 2: 'finish', 3: 'error' }
  return statusMap[status] || 'wait'
}

const getCurrentStepIndex = () => {
  const stepList = workflowData.value.stepList || []
  for (let i = 0; i < stepList.length; i++) {
    if (stepList[i].status === 1) return i
    if (stepList[i].status === 0) return i - 1
  }
  return stepList.length - 1
}

const getApprovalType = (result: number) => {
  const typeMap = { 1: 'success', 2: 'danger', 3: 'warning' }
  return typeMap[result] || 'primary'
}

const getApprovalColor = (result: number) => {
  const colorMap = { 1: 'success', 2: 'danger', 3: 'warning' }
  return colorMap[result] || 'info'
}

const getApprovalResultName = (result: number) => {
  const resultMap = { 1: '通过', 2: '拒绝', 3: '退回' }
  return resultMap[result] || '-'
}

const open = (data: any) => {
  dialogVisible.value = true
  workflowData.value = data
}

defineExpose({ open })
</script> 